<template>
  <div>
    <div class="layout-content-breadcrumb">
      <Breadcrumb>
        <Breadcrumb-item>资源管理</Breadcrumb-item>
        <Breadcrumb-item>资源列表</Breadcrumb-item>
      </Breadcrumb>
    </div>
    <div class="page-content">
      <div class="list-search" @keyup.enter="onSearch">
        <Row type="flex" :gutter="16">
          <Col span="8">
          <hx-input-item label="资源名称">
            <Input type="text" v-model="search.title" placeholder="请输入资源名称">
            </Input>
          </hx-input-item>
          </Col>
          <Col span="8">
          <Button type="primary" @click="onSearch">查询</Button>
          </Col>
        </Row>
      </div>
      <Table :columns="columns" :data="dataSource"></Table>
      <div class="table-paging">
        <Page :total="totalNumber" :current="page" :page-size="pageSize" show-total @on-change="onPageChange"></Page>
      </div>
    </div>
  </div>
</template>
<style lang="less">

</style>
<script>
  import api from 'service/resource'
  export default{
    data(){
      return {
        page: 1,
        pageSize: 10,
        totalNumber: 0,
        search: {
          title: ''
        },
        columns: [
          {
            title: '资源名称',
            key: 'title'
          },
          {
            title: '登录方式',
            key: 'use_way',
            render(h,params){
                let map={
                  1: 'qq',
                  2: '手机号',
                  3:'邮箱',
                  4:'微信',
                  5:'小米账号',
                  6:'百度账号',
                  7:'支付宝'
                }
                return map[params.row.use_way]
            }
          },
          {
            title: '共享价格',
            key: 'sale_price'
          },
          {
            title: '共享人数',
            key: 'max_share_num'
          },
          {
            title: '销量',
            key: 'sale_count'
          },
          {
            title: '截止时间',
            key: 'end_at',
            render(h, params){
                return params.row.end_at.split(' ')[0]
            }
          },
          {
            title: '联系手机',
            key: 'phone'
          },
          {
            title: '账号',
            key: 'account'
          },
          {
            title: '密码',
            key: 'password'
          },
          {
            title: '卖家描述',
            key: 'desc',
            render:(h,params)=>{
              let txt=params.row.desc||''
              if(txt.length>15){
                txt=txt.slice(0,15)+'...'
              }
              return h('span', {
                attrs: {
                  title: params.row.desc
                }
              },txt)
            }
          }
        ],
        dataSource: [],

      }
    },
    mounted(){
      this.onPageChange(1)
    },
    methods: {
      onSearch(){
        this.onPageChange(1)
      },
      onPageChange(page){
        this.page = page
        api.getResource({
          page: page,
          per_page: this.pageSize,
          'title[like]': this.search.title.trim()
        }).then(({data}) => {
          this.dataSource = (data.list || [])
          this.totalNumber = Number(data.total_count)
        })
      }
    }
  }
</script>
